/* Center
-------------------------- */
@mixin hvFlexCenterMx($flexType) {
  display: $flexType;
  justify-content: center;
  align-items: center;
}

/* Types
-------------------------- */
$typeList: primary, success, warning, danger, info;

/* Grid System
-------------------------- */
@mixin gridSpans($class) {
  @for $n from 0 through 24 {
    .lol-col.#{$class}-#{$n} {
      width: ($n / 24) * 100%;
    }
  }
}

@mixin gridPcSpans() {
  @include gridSpans(lol-col-pc)
}

@mixin gridPhoneSpans() {
  @include gridSpans(lol-col-phone);
}

@mixin gridTabletSpans() {
  @include gridSpans(lol-col-tablet);
}

// Offset
@mixin gridOffsets($class) {
  @for $n from 0 through 24 {
    .lol-col.#{$class}-#{$n} {
      margin-left: ($n / 24) * 100%;
    }
  }
}

@mixin gridPcOffsets() {
  @include gridOffsets(lol-col-pc-offset);
}

@mixin gridPhoneOffsets() {
  @include gridOffsets(lol-col-phone-offset);
}

@mixin gridTabletOffsets() {
  @include gridOffsets(lol-col-tablet-offset);
}

// Responsive
@mixin phone {
  // 0 -> Infinite
  @media all {
    @content;
  }
}

@mixin tablet {
  // 577 -> Infinite
  @media (min-width: 577px) {
    @content;
  }
}

@mixin pc {
  // 1025 -> Infinite
  @media (min-width: 1025px) {
    @content;
  }
}